@extends('Admin.base')
@section('css')
    <link rel="stylesheet" href="/Admin/layuiadmin/css/extend/formSelects-v4.css" media="all">
@endsection
@section('style')
    <style type="text/css">
        .textc{width:80px; height:40px;}
    </style>
@endsection
@section('content')

    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>补货</legend>
            </fieldset>
        </div>
        <div class="layui-form layui-card-header layuiadmin-card-header-auto ">
            <div class="layui-form-item layui-row">
                <div class="layui-col-md6" >
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-block">
                        <input type="text" name="keyword" placeholder="请输入商品名称、ID、品牌" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-block">
                        <select name="status" > 
                            <option value="">售卖状态</option> 
                            @foreach (\App\Models\Goods::SALE_STATUS as $id => $name) 
                            <option value="{{$id ?? 0}}">{{$name ?? ''}}</option> 
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-btn-group layui-input-block">
                        <button class="layui-btn layui-btn-sm layui-input-block layuiadmin-btn-admin" lay-submit lay-filter="LAY-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-table" lay-filter="LAY-table"></table>
            <script type="text/html" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn" lay-event="pad">补货</button>
                </div>
            </script>
            <input type="hidden" value="" id="num">
        </div>
    </div>
@endsection
@section('script')
    {{--<script src="/js/ajax.js"></script>--}}
    <script>

        layui.use(['form', 'table', 'formSelects'], function(){
            var $ = layui.$
                    ,form = layui.form
                    ,table = layui.table

            table.render({
                elem: '#LAY-table'
                ,title: "商品库存表"
                ,toolbar: "#toolbar"
                ,defaultToolbar: []
                ,id: 'list'
                ,width: 800
                ,url: "{{route("store.tabelList")}}"
                ,method: "post"
                ,page: true
                ,limit:10
                ,cols: [[
                    {field: 'photo', title: '缩略图',templet:function(d){return d.photo ? '<img src="'+ d.photo + '" />' : ""}}
                    ,{field: '',width:350, title: '商品信息',templet: function(d){
                        d.sku = d.sku ? d.sku : "";
                        d.goods_brands = d.goods_brand ? d.goods_brand['name'] :"" ;
                        return  d.goods_name +'<br>'+ d.sku +'<br>' + d.goods_brands;
                    }}
                    ,{field: 'status', title: '售卖状态',templet:function(d){
                        return d.status == 1 ? (d.stock == 0 ? "已售罄" : "上架") : "下架";
                    }}
                    ,{field: 'stock', title: '当前库存',sort: true}
                    ,{ title: '补货数量', templet:function(d){
                        return ' <div><input type="text" name="'+ d.id+'"  value="" class="textc"></div>'
                    } }
                ]]
            });
            $('body').on('change','.textc',function(){
               if(!/^[0-9]+$/.test($(this).val())){
                   layer.msg("补货数量格式不正确!");
                   $(this).val("");
               }
            });
            //监听工具条
            table.on('toolbar(LAY-table)', function(obj){
                    var paddata ="";
                    var padnum = 0;
                    var padamount = 0;
                    $(".textc").each(function() {
                        if($.trim($(this).val()) != "") {
                            paddata +=  $(this).attr("name") + "@" +$(this).val() + ",";
                            padnum +=1;
                            padamount += parseInt($.trim($(this).val()));
                        }
                    });
                    if(padnum==0){
                        layer.msg("请先添加补货数据");
                        return false;
                    }
                    layer.open({
                        title: '补货确认'
                        ,content:'<div class="layui-card">'+
                      '<div class="layui-card-body">'+
                      '    <form class="layui-form" id="layui-form" >'+
                      '        <div class="layui-form-item">'+
                      '            <label class="layui-form-label">补货品类</label>'+
                      '            <div class="layui-input-block" >'+
                      '                <input type="text" name="skunum" id="skunum"  readonly="readonly" value="'+ padnum +'" class="layui-input" >'+
                      '            </div>'+
                      '        </div>'+
                      '        <div class="layui-form-item">'+
                      '            <label class="layui-form-label">补货数量</label>'+
                      '            <div class="layui-input-block" >'+
                      '                <input type="text" name="amount" id="amount" readonly="readonly" value="'+ padamount +'" class="layui-input">'+
                      '           </div>'+
                      '        </div>'+
                      '        <div class="layui-form-item">'+
                      '            <label class="layui-form-label">补货单号</label>'+
                      '            <div class="layui-input-block" >'+
                      '                <input type="text"  name="order_no" id="order_no" required  lay-verify="required" class="layui-input">'+
                      '            </div>'+
                      '        </div>'+
                      '        <div class="layui-form-item">'+
                      '            <label class="layui-form-label">补货事由</label>'+
                      '            <div class="layui-input-inline">'+
                      '                <input type="text" name="remark"  id="remark" lay-verify="required" class="layui-input">'+
                      '            </div>'+
                      '        </div>'+
                      '        <input type="hidden" name="pad" id="paddata" value="'+paddata+'">'+
                      '            <div class="layui-form-item">'+
                      '                <div class="layui-input-block">'+
                      '                    {{csrf_field()}}'+
                      '                    <button type="reset" class="layui-btn layui-btn-primary" id="quxiaobuhuo">取消</button>'+
                      '                   <button type="submit" class="layui-btn" id="querenbuhuo">确认补货</button>'+
                      '                </div>'+
                      '            </div>'+
                      '    </form>'+
                      '</div>'+
                      '</div>'
                        ,type:1
                        ,area: ['500px', '380px']
                    });
            });
            $('body').on('change','#order_no',function(){
                var order_no = $("#order_no").val();
                $.ajax({
                    url : '{{route('store.orderno')}}'
                    ,type:'Post'
                    , dataType: 'json'
                    , data: {
                        order_no : order_no
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 0) {
                            layer.msg(ret.message,{icon: 2,time:2000});
                            $("#order_no").val("");
                            return false;
                        }

                    }
                })
            });
            $('body').on('click','#querenbuhuo',function(){
                var order_no = $("#order_no").val();
                var remark = $("#remark").val();
                var padnum = $("#skunum").val();
                var amount = $("#amount").val();
                var paddata = $("#paddata").val();
                $.ajax({
                    url: '{{route('store.savePad')}}'
                    , type: 'POST'
                    , dataType: 'json'
                    , data: {
                        amount : amount
                        ,order_no : order_no
                        ,skunum :padnum
                        ,remark :remark
                        ,pad : paddata
                    }
                    , success: function (ret) {
                        if (ret.hasOwnProperty('code') && ret.code == 200) {
                            layer.msg(ret.message,{icon: 1,time:2000});
                            return false;
                        }else{
                            layer.msg(ret.message,{icon:2,time:2000});
                        }

                    }
//                    , complete: function(){
////                        layer.closeAll('loading');
//                    }
                });


            });
            $("body").on('click',"#quxiaobuhuo",function(){
                layer.closeAll();
            });
            //监听搜索
            form.on('submit(LAY-search)', function(data){
                var field = data.field;
                console.log(field);
                //执行重载
                table.reload('list', {
                    where: field,page: {curr: 1}
                });

            });
        });
    </script>

@endsection